<template>
  <el-dialog
    :visible.sync="adjustPriceVisible"
    :modal-append-to-body="false"
    :close-on-click-modal="false"
    title="调价单"
    width="60%"
    @close="handleCloseDialog"
  >
    <el-tabs
      v-model="tabs.value"
      @tab-click="handleClickTabs"
      style="margin: 10px"
    >
      <el-tab-pane
        label="单计量"
        name="single"
        :disabled="tabs.disabled"
      >
      </el-tab-pane>
      <el-tab-pane
        label="多计量"
        name="multiple"
        :disabled="tabs.disabled"
      >
      </el-tab-pane>
    </el-tabs>
    <el-table
      ref="multipleTable"
      border="border"
      v-loading="table.loading"
      :data="table.list"
    >
      <el-table-column
        v-for="column in table.columns"
        :key="column.key"
        :prop="column.key"
        :label="column.title"
        :align="column.align || 'center'"
        :min-width="120"
        :fixed="column.fixed"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <el-row slot="footer" type="flex" justify="center">
      <el-button @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import { ApiRequest } from '@/api/basePage';
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    recordNo: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      adjustPriceVisible: this.visible,
      tabs: {
        value: 'single',
        disabled: false
      },
      table: {
        loading: false,
        list: [],
        columns: [
          {
            title: '调价通知单据号',
            key: 'recodeNo',
            fixed: 'left',
          },
          {
            title: '商品名称',
            key: 'productName',
          },
          {
            title: 'SPU编码',
            key: 'spuNo',
          },
          {
            title: 'SKU编码',
            key: 'skuNo',
          },
          {
            title: '规格',
            key: 'spec',
          },
          {
            title: '商品管理区域',
            key: 'productManagerArea',
          },
          {
            title: '计量单位',
            key: 'productUnit',
          },
          {
            title: '供货单位',
            key: 'storeUnit',
          },
          {
            title: '原辅进价',
            key: 'oldUnitPrice',
          },
          {
            title: '现辅进价',
            key: 'newUnitPrice',
          },
          {
            title: '浮动比例',
            key: 'changeRatio',
          },
          {
            title: '发起原因',
            key: 'reason',
          },
          {
            title: '落实原因',
            key: 'auditReason',
          },
          {
            title: '调价单号',
            key: 'changeNo',
          },
          {
            title: '状态',
            key: 'stateStr',
          }
        ],
      }
    }
  },
  watch: {
    visible (newValue) {
      this.adjustPriceVisible = newValue
      if (newValue) { this.getDataListAction() }
    },
  },
  methods: {
    getDataListAction () {
      let data = {};
      this.table.loading = true;
      ApiRequest(
        `/sysback/salepricechangeorder/prepareChangeOrder?recordNo=${this.recordNo}`,
        'post',
        data
      ).then((res) => {
        this.table.loading = false;
        if (res.retStatus !== '1') { return false }
        this.table.list = this.tabs.value === 'single' ? res.retData.single : res.retData.multi;
      }).catch(() => {
        this.table.loading = false;
      })
    },
    handleClickTabs () {
      this.getDataListAction();
    },
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    handleSubmit () {
      if (this.table.list.length === 0) {
        return this.$message.warning('调价单信息为空')
      }
      if (this.tabs.value === 'single') {
        this.$router.push({
          path: '/commodity/commodityInfoUpdate/chageFromManage/chageFromManageenterPrice',
          query: { recordNo2: this.recordNo }
        });
      } else {
        this.$router.push({
          path: '/commodity/commodityManage/chageFromManage/chageFromManageenterPriceSteel',
          query: { recordNo2: this.recordNo }
        });
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 10px 20px;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid #e8eaec;
}
/deep/ .el-dialog__footer {
  border-top: 1px solid #e8eaec;
}
</style>
